<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <title>乐优商城--微信支付页</title>
    <link rel="icon" href="/assets/img/favicon.ico">


    <link rel="stylesheet" type="text/css" href="css/webbase.css"/>
    <link rel="stylesheet" type="text/css" href="css/pages-weixinpay.css"/>
</head>

<body>

<!--页面顶部白条条，由js动态加载-->
<div id="payVm">
    <div class="top">
        <shortcut/>
    </div>

    <div class="cart py-container">
        <!--logoArea-->
        <div class="logoArea">
            <div class="fl logo">
                <span class="title">收银台</span>
            </div>
        </div>
        <!--主内容-->

        <a href="payfail.html">支付失败演示页</a>
        <a href="paysuccess.html">支付成功演示页</a>


        <div class="checkout py-container  pay">
            <div class="checkout-tit">
                <h4 class="fl tit-txt">
                    <span class="success-icon"></span>
                    <span class="success-info">订单提交成功，请您及时付款！订单号：{{orderId}}</span>
                </h4>
                <span class="fr">
						<em class="sui-lead">应付金额：</em>
						<em class="orange money">￥{{actualPay}}</em>元</span>
                <div class="clearfix"></div>
            </div>
            <div class="checkout-steps">
                <div class="fl weixin">微信支付</div>
                <div class="fl sao">
                    <p v-if="time > 0">二维码十分钟内有效</p>
                    <p v-else class="red">二维码已过期，刷新页面重新获取二维码。</p>
                    <div class="fl code">
                        <!--<img src="img/erweima.png" alt="">-->
                        <div id="qrImg"></div>
                        <div class="saosao">
                            <p>请使用微信扫一扫</p>
                            <p>扫描二维码支付</p>
                        </div>
                    </div>
                    <div class="fl phone">

                    </div>

                </div>
                <div class="clearfix"></div>
                <p>
                    <a href="pay.html" target="_blank">> 其他支付方式</a>
                </p>
            </div>
        </div>

    </div>
</div>


<!-- 底部栏位 -->
<!--页面底部，由js动态加载-->
<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<div class="clearfix footer"></div>
<script type="text/javascript">$(".footer").load("foot.html");</script>
<!--页面底部END-->
<script src="./js/vue/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/common.js"></script>
<script src="./js/qrcode.min.js"></script>
<script>
    var payVm = new Vue({
        el: "#payVm",
        data: {
            ly,
            orderId: 0,//订单编号，初始化为0
            actualPay:0,//需要支付的金额，初始化为0
            time:600,//二维码的声明周期，设置为十分钟
        },
        created() {
            //钩子函数，支付界面一打开就验证用户是否处于登录有效状态
            ly.verifyUser()
                .then(() => {
                    //获取支付金额，从URL上截取
                    this.actualPay = ly.getUrlParam("actualPay");
                    //用户处于登录状态，获取订单编号，从URL上截取
                    this.orderId = ly.getUrlParam("orderId");
                    //获取二维码生成链接
                    ly.http.get("/order/order/url/" + this.orderId)
                        .then(resp => {
                            //生成二维码的方法
                            new QRCode(document.getElementById("qrImg"), {
                                text: resp.data,
                                width: 250,
                                height: 250,
                                colorDark: "#000000",
                                colorLight: "#ffffff",
                                correctLevel: QRCode.CorrectLevel.H
                            });
                        })
                })
                .catch(() => {
                    //用户不处于登录状态,跳转到登录界面
                    window.location.href = "/login.html?returnUrl = " + window.location.href;
                });

            // 开启定时任务，查询付款状态
            const taskId = setInterval(() => {
                ly.http.get("/order/order/state/" + this.orderId)
                    .then(resp => {
                        let i = resp.data;
                        if (i === 1) {
                            // 付款成功
                            clearInterval(taskId);
                            // 跳转到付款成功页
                            location.href = "/paysuccess.html?orderId=" + this.orderId;
                        } else if (i === 2) {
                            // 付款失败
                            clearInterval(taskId);
                            // 跳转到付款失败页
                            location.href = "/payfail.html";
                        }
                    })
            }, 3000);

            //设置一个定时器，倒计时二维码的声明周期
            let clock = window.setInterval(()=>{
                this.time--;
                if (this.time < 0) {
                    window.clearInterval(clock);
                }
            },1000)
        },
        components: {
            shortcut: () => import("./js/pages/shortcut.js")
        }
    });
</script>


<script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="js/widget/nav.js"></script>
<script type="text/javascript">
    $(function () {
        $("ul.payType li").click(function () {
            $(this).css("border", "2px solid #E4393C").siblings().css("border-color", "#ddd");
        })
    })
</script>
</body>

</html>